<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">租户列表</p>
        </div>
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        class="btn-success"
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="tenantAdd()"
                        v-hasPermi="['system:sysTenant:insert']"
                    >新建</el-button>
                </el-col>
            </el-row>
            <el-table :data="tenantList" border>
                <el-table-column label="序号" type="index" align="center" width="50" />
                <el-table-column label="用户id"  align="center" prop="tenantId" :show-overflow-tooltip="true" />
                <el-table-column label="登录名" align="center" prop="loginName" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="公司名称" align="center" prop="corporateName" :show-overflow-tooltip="true" width="220" />
                <el-table-column label="法人" align="center" prop="legalPerson" :show-overflow-tooltip="true" />
                <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" width="110" />
                <el-table-column label="用户数量限制" align="center" prop="userNumLimit" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="码生成数量限制" align="center" prop="codeNumLimit" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="租户类型" align="center" prop="type" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">免费租户</div>
                        <div v-if="scope.row.type == 1">付费租户</div>
                    </template>
                </el-table-column>
                <el-table-column label="启用" align="center" prop="enabled" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-if="scope.row.enabled == 0" style="color:#fd562c">禁用</div>
                        <div v-if="scope.row.enabled == 1" style="color:#52C41A">启用</div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" width="180" />
                <el-table-column label="到期时间" align="center" prop="expireTime" :show-overflow-tooltip="true" width="180" />
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:sysTenant:update']"
                        >编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
        <!-- 添加或编辑角色配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body center>
            <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="登录名" prop="loginName">
                            <el-input v-model="form.loginName" placeholder="请输入登录名" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司名称" prop="corporateName">
                            <el-input v-model="form.corporateName" placeholder="请输入公司名称" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人" prop="legalPerson">
                            <el-input v-model="form.legalPerson" placeholder="请输入法人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="租户类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择" style="width:100%;">
                                <el-option label="免费租户" value="0">免费租户</el-option>
                                <el-option label="付费租户" value="1">付费租户</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="启用" prop="enabled">
                            <el-select v-model="form.enabled" placeholder="请选择" style="width:100%;">
                                <el-option label="禁用" value="0">禁用</el-option>
                                <el-option label="启用" value="1">启用</el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="码生成数量限制" prop="codeNumLimit">
                            <el-input v-model.number="form.codeNumLimit" autocomplete="off" placeholder="请输入码生成数量限制" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.generatedQuantity">
                        <el-form-item label="已生成数量" prop="generatedQuantity">
                            {{ form.generatedQuantity }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户数量限制" prop="userNumLimit">
                            <el-input v-model.number="form.userNumLimit" autocomplete="off" placeholder="请输入用户数量限制" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="到期时间" prop="expireTime">
                            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.expireTime" suffix-icon="el-icon-date" type="datetime" placeholder="请选择到期时间" :picker-options="pickerOptions" style="width:100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="btn-success mr20 width100" @click="submitForm">确 定</el-button>
                <el-button class="width100" @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { tenantList, tenantDetail, tenantAdd, tenantEdit } from "@/api/system/tenant/tenant"
export default {
    name: "tenantList",
    data() {
        return {
            tenantList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            form: {},
            title: "",
            open: false,
             // 日期控制
            pickerOptions: {
                // disabledDate(time) {
                //     return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
                // }
            },
            // 表单校验
            rules: {
                loginName: [
                    { required: true, message: "登录名不能为空", trigger: "blur" }
                ],
                corporateName: [
                    { required: true, message: "公司名称不能为空", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "手机号不能为空", trigger: "blur" },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
                ],
                userNumLimit: [
                    { required: true, message: "用户数量限制不能为空", trigger: "blur" },
                    { type: 'number', message: '用户数量必须为数字'}
                ],
                expireTime: [
                    { required: true, message: "到期时间不能为空", trigger: "blur" }
                ],
                codeNumLimit: [
                    { required: true, message: "码生成数量限制不能为空", trigger: "blur" },
                    { type: 'number', message: '码生成数量限制必须为数字'}
                ]
            },
            disabled: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            tenantList(this.addDateRange(this.queryParams)).then(res => {
                this.tenantList = res.rows
                this.total = res.total
            })
        },
        // 新建
        tenantAdd(){
            this.reset()
            this.open = true
            this.form.type = '0'
            this.form.enabled = '1'
            this.title = "添加租户"
            this.disabled = false
        },
        // 编辑
        handleUpdate(row){
            tenantDetail(row.id).then(res => {
                // console.log(res)
                this.open = true
                this.title = "编辑租户"
                this.form = res.data
                this.disabled = true
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.disabled = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                tenantId: undefined,
                loginName: undefined,
                corporateName: undefined,
                legalPerson: undefined,
                phone: undefined,
                userNumLimit: undefined,
                type: undefined,
                enabled: undefined,
                expireTime: undefined,
                remark: undefined,
            }
            this.resetForm("form")
        },
        // 确认按钮
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        tenantEdit(this.form).then(res => {
                            this.$modal.msgSuccess("编辑成功")
                            this.open = false
                            this.getList()
                        })
                    } else {
                        // console.log(this.form)
                        if(this.form.userNumLimit !== 0){
                            tenantAdd(this.form).then(res => {
                                this.$modal.msgSuccess("新建成功")
                                this.open = false
                                this.getList()
                            })
                        }else{
                            this.$modal.msgError('用户数量限制不能为0！')
                        }
                    }
                }
            })
        },
    }
}
</script>

<style scoped>
::v-deep .el-dialog__body{
    padding: 25px 25px 25px 0;
}
</style>